<template>
  <div class="wrap">
    <div class="overlay">
      <div class="overlay-content scrolling">
        <header>
          <div class="align-items row-space-around">
            <van-icon
              name="arrow-left"
              slot="left"
              size="22"
              color="#343434"
              @click="$router.go(-1)"
            />
            <van-search
            
              show-action
              @focus="hasFocus = !hasFocus"
              @cancel="$router.go(-1)"
              placeholder="输入ToKen名称或合约地址"
              v-model="searchValue"
              class="search"
            />
          </div>
        </header>
        <section v-if="hasFocus" class="row-justify-content sec-one">
          <div>
            <p>im ToKen 支持所有 ETH 代币</p>
            <p>请输入代币名称或者合约地址进行搜索</p>
          </div>
        </section>
        <section v-else class="sec-two">
          <van-cell-group>
            <van-cell title="ETH" label="slagk5d2a...dkal5465akdk" class="cell align-items">
              <div slot="icon">
                <img src="../../assets/images/txing.png" width="29px" />
              </div>
              <van-icon
                :name="clicked?'passed':'add-o'"
                size="20"
                :color="clicked?'#ccc':'#0b8ee6'"
                @click="add"
              />
            </van-cell>
          </van-cell-group>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hasFocus: true
    };
  },
  mounted() {
  },
  components: {},
  methods: {
    add() {
      this.clicked = !this.clicked;
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  height: 100%;
  header {
    position: fixed;
    z-index: 999;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #f5f6f7;
    .search {
      width: 331px;
      padding: 8px 0;
    }
  }
  .sec-one {
    height: 100%;
    background: #f2f4f5;
    div {
      color: #999999;
      text-align: center;
      margin-top: 230px;
      font-size: 14px;
    }
  }
}

.van-search__action {
  color: #0b8ee6;
}

.sec-two {
  padding: 43px 0 0 16px;
}

.cell {
  padding: 20px 12px 20px 5px;
}

.cell img {
  vertical-align: text-top;
  margin-right: 10px;
}

.van-cell__title {
  display: flex;
  flex-wrap: wrap;
  height: 40px;
}

.van-search__content {
  border-radius: 5px;
}

.van-cell__value {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.van-cell__label {
  margin-top: 0px;
  color: #969799;
  font-size: 12px;
  line-height: 12px;
}
</style>